<script setup lang="ts">
import { OperationType } from '@/entity/OperationType';
import { Page } from '@/entity/Page';
import { SysMessage } from '@/entity/SysMessage';
import { SysMessageType } from '@/entity/SysMessageType';
import messageCenterService from '@/services/message-center.service';
import { AxiosError } from 'axios';
import { ElLoading, ElMessage, ElMessageBox, type ElPagination, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElButton, ElIcon, ElButtonGroup } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Search, Refresh, Plus, Edit, Delete, View, Upload, Download, Share, Close, Bell, Check } from "@element-plus/icons-vue";
import { ElDivider } from "element-plus";
import { ReadMessagesParam } from '@/entity/ReadMessagesParam';

const createDefaultSearchEntity = () => {
  const e = new SysMessage();
  return e;
}

const router = useRouter();
const route = useRoute();
const page = ref(new Page<SysMessage>());
const searchEntity = ref(createDefaultSearchEntity());
const tableLoading = ref(false);

const load = async (no?: number, size?: number, searchObj?: SysMessage) => {
  try {
    tableLoading.value = true;
    const res = await messageCenterService.page(no, size, searchObj);
    page.value = res;
  } catch (err) {
    if (err instanceof AxiosError) {
      const msg = err.response?.data?.message || err.message;
      ElMessage({ message: msg, type: "error" });
    }
    throw err;
  } finally {
    tableLoading.value = false;
  }
}

const pageChanged = async (no: number) => {
  await load(no, page.value.size, searchEntity.value);
}

const pageSizeChanged = async (size: number) => {
  await load(1, size, searchEntity.value);
}

const readAll = async () => {
  const param = new ReadMessagesParam();
  param.all = true;
  await readMessages(param);
}

const readOne = async (msg: SysMessage) => {
  const param = new ReadMessagesParam();
  param.all = false;
  param.ids = [msg.id];
  await readMessages(param);
}

const readMessages = async (param: ReadMessagesParam) => {
  try {
    await messageCenterService.read(param);
    load(undefined, page.value.size);
  } catch (err) {
    if (err instanceof AxiosError) {
      const msg = err.response?.data?.message || err.message;
      ElMessage({ message: msg, type: "error" });
    }
    throw err;
  } finally {

  }
}

onMounted(async () => {
  await load();
});
</script>

<template>
  <div class="mb-2">
    <ElButtonGroup>
      <ElButton plain :size="'small'" :icon="Check" @click="readAll">全部标为已读</ElButton>
    </ElButtonGroup>
  </div>
  <div class="message-list">
    <div class="message-item" v-for="msg of page.content" :key="msg.id">
      <template v-if="msg.type == SysMessageType.NOTICE">
        <div class="flex flex-row">
          <div class="flex-none">
            <ElIcon>
              <Bell></Bell>
            </ElIcon>
          </div>
          <div class="grow px-2">
            <a href="javascript:void(0);" class="no-underline text-[#377d9b]">
              {{ msg.senderName }} 发布了系统通知
            </a>
            <div class="text-sm text-[#8c92a4]">
              <div class="pt-2">
                标题： {{ msg.title }}
              </div>
              <div class="pt-2">
                内容： {{ msg.content }}
              </div>
              <div class="pt-2">
                发布时间：{{ msg.createdTime }}
              </div>
            </div>
          </div>
          <div class="flex-none">
            <ElButton v-if="!msg.readState" link type="primary" @click="readOne(msg)">标为已读</ElButton>
          </div>
        </div>
        <ElDivider></ElDivider>
      </template>
      <template v-else>

      </template>
    </div>
  </div>
  <ElPagination layout="prev, pager, next, sizes, jumper, total" :total="Number(page.totalElements)"
    :current-page="page.number" :page-size="page.size" :page-sizes="[10, 30, 50, 100, 200]"
    @current-change="pageChanged($event)" @size-change="pageSizeChanged($event)" />
</template>

<style lang="scss"></style>